<template>
  <div id="container">
    <!-- 头部 -->
    <div class="header">
      <headerTou></headerTou>
      <div class="tabs">
        <div @click="fanhui"><i class="el-icon-caret-left"></i>返回</div>
        <img :src="user.dataVLogo ? user.dataVLogo : ''" class="logo" />
      </div>

      <div class="header_right">
        <el-tooltip
          class="item"
          effect="dark"
          :content="fullScreenContent"
          placement="bottom"
        >
          <i :class="quanping1" @click="onFullScreen"></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="后台系统"
          placement="bottom"
        >
          <i
            class="iconfont houtai-xitongguanli tableBtnIcon"
            @click="onHoutai"
          ></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="退出"
          placement="bottom"
        >
          <i class="iconfont tuichu1 tableBtnIcon" @click="exit"></i>
        </el-tooltip>
      </div>
    </div>

    <div class="org_box">
      <div class="left_div">
        <div class="left_noe">
          <orgParticulars ref="refOrgParticulars"></orgParticulars>
        </div>
        <div class="left_two">
          <orgDevice ref="reforgDevice"></orgDevice>
        </div>
        <div class="left_three">
          <!-- <leftThree ref="refleftThree"></leftThree> -->
          <equipment ref="refequipment"></equipment>
        </div>
      </div>
    </div>

    <!-- 右侧 -->
    <div class="right">
      <!-- <div class="right_div">
        <right ref="refright"></right>
      </div> -->
      <div class="right_alarm">
        <div class="right_bottom2">
          <device ref="refDevice"></device>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerTou from "./components/headerTou.vue"; //头部组件
// import leftThree from "./components/leftThree.vue"; //设备分类新 废弃
import equipment from "./components/equipment.vue"; //设备分类新
import right from "./components/right.vue"; //告警组件
import orgParticulars from "./components/org/orgParticulars.vue"; //单位详情
import orgDevice from "./components/org/orgDevice.vue"; //单位设备统计
import device from "./components/device.vue";
import { reqLogout } from "@api/apiDatav.js";
import { mapState, mapMutations } from "vuex";
import screenfull from "screenfull"; //全屏
import { onDestory } from "@utils/map/map";

export default {
  name: "",
  components: {
    headerTou,
    // leftThree,
    right,
    orgParticulars,
    orgDevice,
    device,
    equipment,
  },
  data() {
    return {
      fullScreenContent: "全屏",
      quanping1: "iconfont pc-quanping tableBtnIcon",
      logo: require("@assets/images/logo4.png"),
    };
  },
  computed: {
    ...mapState(["user", "datav", "config"]),
  },
  watch: {},
  beforeDestroy() {},
  async mounted() {
    // console.log('mounted');
    this.$refs.refequipment.DeviceType(); //设备分类
    this.$refs.refOrgParticulars.getSpaceList(); // 获取安装点列表
    this.$refs.reforgDevice.getDeviceCount(); //设备统计
  },
  async activated() {
    // console.log('activated');
    this.$refs.refequipment.DeviceType(); //设备分类
    this.$refs.refOrgParticulars.getSpaceList(); // 获取安装点列表
    this.$refs.reforgDevice.getDeviceCount(); //设备统计
  },
  async created() {},
  methods: {
    ...mapMutations([
      "saveorgarr",
      "saveIsWhiteTheme",
      "saveflagDatav",
      "savebuildingsArr",
      "savefloorId",
      "savefloorFlag",
      "savespacesArr",
      "savespacesFlag",
    ]),
    // 回到租户
    async fanhui() {
      this.$router.go(-1);
      await this.savefloorId(""); // 存储楼层id
      await this.savefloorFlag(!this.datav.floorFlag); //监听楼层
      await this.savespacesArr({}); // 存储安装点信息
      await this.savespacesFlag(!this.datav.spacesFlag); //监听安装点
      this.$refs.refDevice.getclear2(); //回到初始状态
    },

    //后台系统
    onHoutai() {
      this.saveIsWhiteTheme(false);
      // this.config.flagDatav=!this.config.flagDatav
      // this.$router.replace("/org/list")
      if (
        this.user.roleName == "INSTERALL_USER" ||
        this.user.roleName == "UNIT_ADMIN"
      ) {
        this.$router.replace("/org/list");
      } else {
        this.$router.replace("/enterprise/org");
      }
      onDestory(); // 销毁地图
      // this.saveflagDatav(true)
      // location.reload();
    },
    // 全屏
    onFullScreen() {
      // if (!screenfull.isEnabled) {
      //   this.$modal.notifyWarning("你的浏览器不支持全屏");
      //   return false;
      // }
      if (screenfull.element == null) {
        this.fullScreenContent = "退出全屏";
        this.quanping1 = "iconfont compress tableBtnIcon";
      } else {
        this.fullScreenContent = "全屏";
        this.quanping1 = "iconfont pc-quanping tableBtnIcon";
      }
      screenfull.toggle();
    },
    // 退出
    exit() {
      this.$confirm("确定要退出账号吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await reqLogout({ id: this.user.userId });
          sessionStorage.clear();
          this.$router.push("/login");
          window.location.reload(); //页面重新加载一次即可清空vuex
          onDestory(); // 销毁地图
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./buildingDetails.less");
</style>
